import React, { useState, useEffect, useRef } from 'react'
import Header, { Ref as HeaderRef } from "./components/header";
import DebugList from "./components/debugList";
import { useGetDebugData } from 'render/hook/useGetDebugData'
import { onAppClose } from 'render/utils/ipcUtils'
import styles from './index.module.scss'

const Home: React.FC = () => {
    const [app, setApp] = useState<File | null>(null)
    const headerRef = useRef<HeaderRef>(null)
    const { debugList, setDebugList } = useGetDebugData(app)

    const getDropData = (data: File) => {
        setApp(data)
    }


    useEffect(() => {
        onAppClose(() => {
            setApp(null)
            headerRef.current?.reset()
            setDebugList([])
        })
    }, [])


    return (
        <div className={ styles.wrap }>
            <Header getDropData={getDropData} ref={headerRef} />

            <div className={ styles.list_box }>
                <DebugList list={debugList} />
            </div>
        </div>
    )
}

export default Home